<template>
	<view class="">
		<view class="wrap">
			<view class="guest-title">
				<view class="guest-title-left">
					<view class="guest-title-info">
						<view class="guest-title-bar"></view>
						<view class="guest-title-h">领取优惠</view>
						<view class="guest-title-p">Receive discount</view>
					</view>
				</view>
				<view class="more-btn" @click="more_coupon">查看更多</view>
			</view>
			<view class="off" @click="coupon_info" :data-id="resData.coupon.id">
				<swiper class="off-slide" indicator-dots="true" indicator-color="rgba(255,255,255,.6)" indicator-active-color="#fff">
					<swiper-item>
						<image :src="resData.coupon.thumb" class="off-image"></image>
					</swiper-item>
				</swiper>
				<view class="off-info">
					<view class="off-name">{{resData.coupon.name}}只需<text class="red">{{resData.coupon.money}}元</text></view>
					<view class="off-time">活动时间：{{resData.coupon.time}} 至 {{resData.coupon.ling_time}}</view>
				</view>
			</view>
		</view>

		<view class="wrap">
			<view class="guest-title">
				<view class="guest-title-left">
					<view class="guest-title-info">
						<view class="guest-title-bar"></view>
						<view class="guest-title-h">当季新品风格</view>
						<view class="guest-title-p">New style of the season</view>
					</view>
				</view>
				<view class="more-btn" @click="more_itemize">查看更多</view>
			</view>
			<scroll-view scroll-x class="classify-scroll">
				<view class="classify">
					<view class="classify-item" v-for="item in resData.category_list" @click="go_itemize" :data-cid="item.category_id" :data-name="item.name">
						<view class="classify-img">
							<image :src="item.thumb" class="classify-image"></image>
						</view>
						<view class="classify-name">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<scroll-view scroll-x class="season-scroll">
			<view class="season-list">
				<view class="season-item" v-for="item in resData.goods_list.list" @click="go_itemize" :data-cid="item.category_id" :data-name="item.category_name">
					<view class="season-box">
						<image :src="item.is_discount == 1 ? '../../static/images/off-img.png':''" class="off-icon"></image>
						<view class="season-img">
							<image :src="item.thumb" class="season-image"></image>
						</view>
						<view class="season-info">
							<view class="season-name">{{item.name}}</view>
							<view class="season-label">{{item.category_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="wrap">
			<view class="guest-title">
				<view class="guest-title-left">
					<view class="guest-time">
						<view class="guest-day">{{resData.day_info.day}}</view>
						<view class="guest-mont">{{resData.day_info.moth[1]}}月</view>
					</view>
					<view class="guest-title-info">
						<view class="guest-title-bar"></view>
						<view class="guest-title-h">每日客片</view>
						<view class="guest-title-p">Daily guest photos</view>
					</view>
				</view>
				<view class="more-btn" @click="more_itemize">查看更多</view>
			</view>
		</view>

		<swiper class="picture-slide" display-multiple-items="2" previous-margin="30rpx" next-margin="30rpx" snap-to-edge="true">
			<swiper-item v-for="(item,i) in resData.show_photos" :key="i">
				<view class="picture-item">
					<view class="picture-box" @click="open" :data-id="item.id">
						<image :src="item.cover_img" class="picture-image"></image>
						<view class="picture-num">
							<image src="../../static/images/pic-icon.png" class="pic-icon"></image>
							<view class="picture-p">{{item.num}}张</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<page-foot :indexNum="indexNum"></page-foot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexNum: 2,
				resData: [],
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			coupon_info(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/works/coupon?id=' + id
				})
			},
			more_coupon(){
				uni.navigateTo({
					url: '/pages/works/coupon_list'
				})
			},
			more_itemize(){
				uni.navigateTo({
					url: '/pages/works/itemize'
				})
			},
			get_info(){
				this.$http({
					url: 'Api/Work/index',
					data: '',
					hideLoading: true,
					success: res => {
						this.resData = res.data
					}
				})
			},
			open(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/works/iteminfo?id='+id
				})
			},
			go_itemize(e){
				uni.navigateTo({
					url: '/pages/works/itemize?cid='+e.currentTarget.dataset.cid+'&name='+e.currentTarget.dataset.name
				})
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.get_info()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.guest-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.guest-title-left {
		display: flex;
		align-items: center;
	}

	.guest-time {
		margin-right: 10rpx;
		width: 80rpx;
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #000;
	}

	.guest-day {
		width: 60rpx;
		height: 32rpx;
		background: #fff;
		text-align: center;
		line-height: 32rpx;
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
	}

	.guest-mont {
		font-size: 24rpx;
		color: #fff;
	}

	.guest-title-bar {
		width: 87rpx;
		height: 10rpx;
		background: #000;
	}

	.guest-title-h {
		font-size: 32rpx;
		font-weight: bold;
	}

	.guest-title-p {
		font-size: 20rpx;
		color: #4c4c4c;
	}

	.more-btn {
		width: 140rpx;
		height: 54rpx;
		border-radius: 50rpx;
		background: #f2f2f2;
		border: 1px #e6e6e6 solid;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
		color: #666;
	}

	.off {
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
	}

	.off-slide {
		height: 240rpx;
	}

	.off-image {
		height: 240rpx;
	}

	.off-info {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 180rpx;
		border: 1px #e6e6e6 solid;
		border-top: none;
	}

	.off-name {
		font-weight: bold;
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.off-time {
		font-size: 24rpx;
		color: #4c4c4c;
	}

	.classify {
		display: flex;
	}

	.classify-item {
		width: 114rpx;
		margin-right: 46rpx;
		text-align: center;
	}

	.classify-img {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.classify-image {
		width: 100rpx;
		height: 100rpx;
	}

	.classify-name {
		font-size: 24rpx;
		color: #4c4c4c;
	}

	.season-scroll {
		margin-bottom: 30rpx;
	}

	.season-list {
		width: 100%;
		padding-left: 30rpx;
		display: flex;
	}

	.season-item {
		flex: 0 0 380rpx;
		padding-top: 20rpx;
		padding-right: 20rpx;
	}

	.season-box {
		padding: 10rpx;
		border: 1px #e6e6e6 solid;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		position: relative;
	}

	.season-img {
		width: 100%;
		height: 180rpx;
	}

	.season-image {
		height: 180rpx;
	}

	.season-info {
		padding: 15rpx 10rpx;
	}

	.season-name {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.season-label {
		width: 112rpx;
		height: 32rpx;
		border-radius: 50rpx;
		border-bottom-left-radius: 0;
		background: #f7d031;
		box-shadow: 0 0 10rpx rgba(247, 208, 49, 1);
		text-align: center;
		line-height: 32rpx;
		font-size: 22rpx;
		color: #333;
	}

	.off-icon {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -20rpx;
		left: -20rpx;
	}

	.picture-slide {
		height: 350rpx;
	}

	.picture-item {
		padding-right: 20rpx;
	}

	.picture-box {
		padding: 10rpx;
		border: 1px #e6e6e6 solid;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		position: relative;
	}

	.picture-image {
		width: 300rpx;
		height: 300rpx;
	}

	.picture-num {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		z-index: 9;
	}

	.pic-icon {
		width: 38rpx;
		height: 33rpx;
		margin-right: 5rpx;
	}

	.picture-p {
		font-size: 24rpx;
		color: #fff;
		text-shadow: 0 0 10rpx rgba(0, 0, 0, .5);
	}
</style>
